<template>
  <view class="wrap">
    <view class="top">
      <view class="add" @click="add"><u-icon size="18px" name="plus"></u-icon></view>
      <u-search placeholder="请输入关键字" v-model="searchKeywords" :clearabled="true" :focus="true" bg-color="#fff"
        :action-style="searchActionStyle" @search="searchCheck" @change="changeHandler" @custom="searchCheck"></u-search>
      <view class="screen" @click="screen">
        筛选<u-icon name="arrow-right"></u-icon>
      </view>
    </view>
    <!-- 分组 -->
    <view class="group">
      <u-cell-group>
        <u-cell-item @click="screenGroup" :title="groupName?groupName:'全部'"></u-cell-item>
      </u-cell-group>
    </view>
    <view class="card">
      <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
        <u-swipe-action :show="item.show" :index="index" v-for="(item, index) in list" :key="item.id" @click="click"
          @open="open" :options="options">
          <view class="item" @click="todetail(item)">
            <view class="client">
              {{item.clientName}}
            </view>
            <!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
            <view class="detail">
              <view class="shopname">
                {{item.goodsTitle}}
              </view>
              <view class="bottom">
                <text class="time">{{item.buyDate|moteDate}}</text>
                <text class="total">数量:{{item.quantity}}</text>
                <text class="price">单价:{{item.price | priceFixed}}</text>
                <text class="totalprice">总计￥{{item.price*item.quantity|priceFixed}}</text>
              </view>
            </view>
          </view>
        </u-swipe-action>
        <u-divider style="margin-top: 30px" v-if="hasNext">上拉加载更多</u-divider>
      </mescroll-body>
    </view>
    <!-- 分组选择器 -->
    <view class="">
      <!--  <u-picker mode="multiSelector" v-model="show" :z-index="9999" @confirm="Callback" :default-selector="[0,1]"
        :range="multiSelector" ></u-picker> -->
      <u-picker mode="multiSelector" v-model="show" @confirm="Callback" @columnchange="oncolumnchange"
        :default-selector="[0,0]" :range="groupAllData" range-key="name"></u-picker>
    </view>
    <!-- 筛选面板 -->
    
  </view>
</template>

<script>
  import {
    getAllOrder,
    getOrder
  } from '@/utils/order.js'
  import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
  import {
    tablePageSize,
    tableCurrent
  } from '@/common/initData/config'
  import {
    getSalerGroup
  } from "@/utils/saler_group.js"
  import {
    addSaler,
    getAllSalerList
  } from '@/utils/saler.js'
  export default {
    mixins: [MescrollMixin], // 使用mixin
    data() {
      return {
        list: [],
        groupAllData:[],
        disabled: false,
        groupData: [],
        groupName: '',
        btnWidth: 180,
        show: false,
        isShow: false,
        groupid:'',
        hasNext: true,
        all:{name:'全部',id:'1'},
        show: false,
        // all:{name:'全部'}
        options: [{
            text: '详情',
            style: {
              backgroundColor: '#007aff'
            }
          },
          {
            text: '删除',
            style: {
              backgroundColor: '#dd524d'
            }
          }
        ]
      };
    },
    filters: {
      moteDate(value) {
        return value.substring(0, 10)
      },
      priceFixed(value) {
        return value.toFixed(2)
      }
    },
    onLoad() {
      this.getorderData()
    },
    methods: {
      // 选择分组确定后的回调
      Callback(e) {
        this.groupAllData=[]
        console.log('回调', e);
        let index = e[0]
        this.groupName = this.groupData[index].name
        console.log(this.groupName);
        console.log(this.groupData[index]);
        // let id = this.groupData[index].id
      },
      // 联级器每列发生改变的回调
      oncolumnchange(e) {
        console.log('e',e);
        if(e.column===0){
          let id = this.groupData[e.index].id
           this.getAllSalerdata(id)
        }
      },
      // 点击显示分组面板
      screenGroup() {
        this.show = true
        this.getSellerData()
         this.getAllSalerdata(this.groupid)
      },
      // 筛选
      screen() {
        // this.show = true
      },
      // 新增
      add() {
        uni.navigateTo({
          url: '/allList/add/add'
        })
      },
      //获取销售员数据
      getSellerData() {
        getSalerGroup({
          params: JSON.stringify({
            pageSize: -1,
            currentPage: 1,
            isWX: 1
          })
        }).then(res => {
          console.log('group', res)
          this.groupData = res.data.rows;
          this.groupData.unshift(this.all)
          // this.groupAllData.push(this.groupData)
          this.groupAllData[0]=this.groupData
          
          this.groupid=this.groupData[0].id
          console.log('groupData',this.groupData);
        }).catch(e => {
          console.log(e)
          this.groupData = [];
          // this.$XModal.message({
          //   content: "获取销售员数据失败",
          //   status: "error"
          // })
        })
      },
      // 获取不同组的销售成员
      async getAllSalerdata(id) {
        const res = await getAllSalerList({
          params: JSON.stringify({
            group_id: id,
            isWX: 1
          })
        })
        console.log('123',res);
        if(this.groupAllData.length>=1){
          this.groupAllData.splice(1,1)
          // this.groupAllData.push(res.data)
          this.groupAllData[1]=res.data
        }else{
          
        // this.groupAllData.push(res.data)
        this.groupAllData[1]=res.data
        }
        console.log('456',this.groupAllData);
      },
      todetail(item) {
        console.log(item);
        uni.navigateTo({
          url: '/allList/detail/detail?item=' + encodeURIComponent(JSON.stringify(item))
        })
      },
      // 如果打开一个的时候，不需要关闭其他，则无需实现本方法
      open(index) {
        // 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
        // 原本为'false'，再次设置为'false'会无效
        this.list[index].show = true;
        this.list.map((val, idx) => {
          if (index != idx) this.list[idx].show = false;
        })
      },
      click(index, index1) {
        console.log(index);
        if (index1 == 1) {
          this.list.splice(index, 1);
          this.$u.toast(`删除成功`);
        } else {
          this.list[index].show = false
          uni.navigateTo({
            url: '/allList/detail/detail'
          })
        }
      },
      /*上拉加载的回调*/
      upCallback(page) {
        this.pageSize = page.size
        this.currentPage = page.num
        this.getorderData()
      },
      // 获取订单信息
      getorderData() {
        getOrder({
            params: JSON.stringify({
              keywords: '',
              saler_id: null,
              platform: null,
              whom: '',
              beginDate: '',
              endDate: '',
              pageSize: this.pageSize,
              currentPage: this.currentPage,
              isWX: 1
            })
          })
          .then(res => {
            console.log(res.data)
            res = res.data
            if (this.currentPage == 1) this.list = []
            if (res.rows.length < this.pageSize) {
              this.hasNext = false
            } else {
              this.hasNext = true
            }
            this.mescroll.endSuccess(res.rows.length, this.hasNext)
            this.list = this.list.concat(res.rows).map((item) => {
              return {
                ...item,
                show: false
              }
            })
          })
          .catch(e => {
            console.log(e)
          })
      },
    },
   
  };
</script>

<style lang="scss">
  .wrap {
    padding: 10rpx 15rpx;
    background-color: #f0f0f0;

    // padding-bottom: 1000rpx;
    .top {
      display: flex;
      justify-content: space-between;

      .add {
        width: 64rpx;
        height: 64rpx;
        border-radius: 50%;
        background: #fff;
        text-align: center;
        line-height: 74rpx;
        // margin-right: 20rpx;
      }

      .screen {
        // background-color: #fff;
        width: 100rpx;
        text-align: center;
        line-height: 64rpx;
        font-size: 16px;
      }
    }

    .group {
      // height: 80rpx;
      width: 100%;
      background-color: #fff;
      margin: 20rpx 0;
    }

    /deep/ .u-search {
      .u-content {
        border-radius: 30rpx 0 0 30rpx !important;
      }

      .u-action {
        height: 64rpx;
        line-height: 64rpx;
        border-radius: 0 30rpx 30rpx 0;
        background-color: #fd2f3d;
        margin-left: 0;
        width: 100rpx;
        color: #fff;
      }
    }

    .card {

      margin-top: 20rpx;

      .item {
        padding: 10rpx 30rpx;

        .client {
          font-size: 16px;
          margin-bottom: 10rpx;
          line-height: 24px;
        }

        .detail {
          .shopname {
            margin-bottom: 10rpx;
            font-size: 12px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            text-overflow: ellipsis;

          }

          .bottom {
            display: flex;
            justify-content: space-between;

            .time {
              color: #666;
            }

            .price {}

            .totalprice {
              color: #ff0000;
            }
          }
        }
      }
    }
  }


  /deep/.u-swipe-action {
    margin-bottom: 20rpx;
    // padding: 20rpx;
  }
</style>